<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:th='http://www.thymeleaf.org'>

<body>
<span th:replace="@{banner}"></span>

<div class="container-fluid">
    <span th:replace="@{nav}"></span>

    <div class="wrapper">
        <div class="wrapper_header">
            <button id="addMonitorSite_trigger" class="btn" type="button">新增</button>
        </div>
        <div style="height: 100%;overflow: auto;padding-bottom: 40px">
            <table id="monitorSite_list" class="wrapper_inner  table-bordered">
                <tr>
                    <th>监测点名称</th>
                    <th>监测点编号</th>
                    <th>经度</th>
                    <th>纬度</th>
					<th>修改</th>
                    <th>删除</th>
                </tr>
                <span th:if="not ${#lists.isEmpty(monitorSites)}">
            <tr th:each="monitorSite,monitorSiteStat : ${monitorSites}">
                <td class="hide" th:text="${monitorSite.id}"></td>
                <td th:text="${monitorSite.name}"></td>
                <td th:text="${monitorSite.indexCode}"></td>
                <td th:text="${monitorSite.longitude}"></td>
                <td th:text="${monitorSite.latitude}"></td>
                <td th:onclick="|updateMonitorSite(this)|">编辑</td>
                <td th:onclick="|delMonitorSite(this)|">删除</td>
            </tr>
            </span>
            </table>
        </div>

    </div>
</div>


<div class="md-modal" id="addMonitorSite_modal">
    <div class="md-content">
        <form id="monitorSite_form">
            <input id="monitorSiteId" name="id" class="hide"/>
            <label>
                <span>监控点名称:</span>
                <select id="monitorSiteSelect" name="name" th:if="not ${#lists.isEmpty(monitorSiteConfig)}">
                    <option th:each="monitorSite,monitorSiteStat : ${monitorSiteConfig}" th:id="${monitorSite.indexCode}" th:text="${monitorSite.name}"></option>
                </select>
            </label>
            <label>
                <span>监测点编号:</span>
                <input id="monitorSiteIndexCode" name="indexCode" type="text"  readonly="readonly"/>
            </label>
            <label>
                <span>经度:</span>
                <input id="monitorSiteLongitude" name="longitude" type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />
            </label>
            <label>
                <span>纬度:</span>
                <input id="monitorSiteLatitude" name="latitude" type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />
            </label>
            <label id="alert" style="color:#fc6423;">
            </label>
            <div class="footer">
                <button class="btn btn-primary" type="button" onclick="addMonitorSite()">确定</button>
            </div>
        </form>
    </div>

</div>

<script type="text/javascript" th:src="@{/zs/assets/js/myModal.js}"></script>

<script th:inline="javascript">

    var monitorSites = /*[[${monitorSites}]]*/;
    var uIndexCode;

    $('.system-nav li:eq(5)').addClass('choosed');

    $("#addMonitorSite_trigger").bind('click', function (e) {
        if ($("#addMonitorSite_modal").is(":visible")) {
            return;
        }
        else {
        	$("#monitorSiteId").val("");
        	$("#monitorSiteLongitude").val("");
        	$("#monitorSiteLatitude").val("");
            open_modal("addMonitorSite_modal");
        }
        e.preventDefault();
    });
    function addMonitorSite() {
        var monitorSite = $('#monitorSite_form').serializeObject();
        var url;
        if (isEmpty(monitorSite.id)) {
            if (isEmpty(monitorSite.longitude)) {
                alert("监测点经度不能为空");
                return;
            }
            if (isEmpty(monitorSite.latitude)) {
                alert("监测点纬度不能为空");
                return;
            }
            for (var i = 0; i < monitorSites.length; i++) {
                if (monitorSites[i].indexCode == monitorSite.indexCode) {
                    alert("监测点已存在");
                    return;
                }
            }
            url = "/zs/monitorSite/add";
        } else {
            if (isEmpty(monitorSite.longitude)) {
                alert("监测点经度不能为空");
                return;
            }
            if (isEmpty(monitorSite.latitude)) {
                alert("监测点纬度不能为空");
                return;
            }
            for (var i = 0; i < monitorSites.length; i++) {
                if (monitorSites[i].indexCode == monitorSite.indexCode && monitorSite.indexCode != uIndexCode) {
                    alert("监测点已存在");
                    return;
                }
            }
            url = "/zs/monitorSite/update";
        }
        $.post(url, monitorSite,
            function (data, status) {
                if (status == 'success') {
                    $('#monitorSite_form').formReset();
                    window.location.reload();
                } else {
                    alert("添加(修改)失败");
                }
            });
    }

    function delMonitorSite(el) {
        var a = confirm('确认删除吗?');
        if (a == true) {
            var id = $(el).parent().children().eq(0).text();
            var url = '/zs/monitorSite/del/' + id;
            $.post(url, function (data, status) {
                if (status == 'success') {
                    $(el).parent().hide();
                } else {
                    alert("删除失败");
                }
            });
        }
        else return;

    }

    function updateMonitorSite(el) {
        var childrens = $(el).parent().children();
        $('#monitorSite_form').find('input[name=id]').val(childrens.eq(0).text());
        $('#monitorSite_form').find('select').val(childrens.eq(1).text());
        $('#monitorSite_form').find('input[name=indexCode]').val(childrens.eq(2).text());
        $('#monitorSite_form').find('input[name=longitude]').val(childrens.eq(3).text());
        $('#monitorSite_form').find('input[name=latitude]').val(childrens.eq(4).text());
        uIndexCode = childrens.eq(2).text();
        open_modal("addMonitorSite_modal");
    }
    $("#monitorSiteSelect").change(function(){
    	$("#monitorSiteIndexCode").val($(this).find("option:selected").attr("id"));
    });
    $("#monitorSiteIndexCode").val($("#monitorSiteSelect").find("option:selected").attr("id"));
</script>

</body>
</html>